$animateDuration = 0.35s

.menu-main-mask
  display none
  position absolute
  left 0
  right 0
  top 0
  bottom 0
  &.menu-open
    display block
.menu-main
  position absolute
  left 0px
  top 0
  bottom 0
  width 230px
  // background #2F5AFF
  transform translate(-230px, 0)
  box-sizing border-box
  padding 0 20px 40px
  transition $animateDuration cubic-bezier(.75,.26,.02,1.01) transform
  &.menu-open
    transform translate(0, 0)
.menu-title
  font-size 20px
  line-height 1.4
  color #fff
  margin-bottom 14px
  &:before
    content ''
    display inline-block
    margin -3px 7px 0 0
    vertical-align middle
    width 14px
    height 28px
    background #FF9F00
    border-radius 15px
    filter blur(0px)


.menu-main-toggle
  position relative
  left 137px
  margin-bottom 10px
  width 50px
  height 50px
  // top 0
  background url(https://image-hosting.xiaoxili.com/img/img/20200831/cd57b4fd2b33b2095b9d1c93f955df80-0d2729.svg) no-repeat center
  // position fixed
  // left 0
  // top 0
  // width 50px
  // height 44px
  // transition $animateDuration cubic-bezier(.75,.26,.02,1.01) background
  // display flex
  // flex-direction column
  // align-items center
  // justify-content center

  // .menu-line
  //   width 20px
  //   height 3px
  //   margin 1px auto
  //   background #2F3742
  //   border-radius 2px
  //   transition $animateDuration cubic-bezier(.75,.26,.02,1.01)
  
  // &.menu-open
  //   .menu-line
  //     background #fff
  //     &:nth-child(1)
  //       transform translate(0%, 175%) rotate(-45deg)
  //     &:nth-child(2)
  //       opacity 0
  //     &:nth-child(3)
  //       transform translate(0%, -175%) rotate(45deg)

.theme-list
  display flex
  flex-wrap wrap
  padding-left 20px
  
.theme-item
  border-radius 30px 0 30px 0
  overflow hidden
  background #fff
  &:nth-child(2n)
    margin-left 20px
  &:nth-child(n + 3)
    margin-top 20px

  .theme-image
    width 70px
    height 70px
    // border-radius 15px
  .theme-text
    margin-top 3px
    font-size 12px
    line-height 1.5
    color #333333
    text-align center
    border-radius 10px
  &.theme-active
    .theme-text
      box-shadow 0 0 0 1px rgba(255, 255, 255, 0.3)

.about-wrap
  position absolute
  bottom 95px
  left 20px
  color #fff
  width 180px

  .about-text
    padding-left 20px
    font-size 15px

  .about-btn
    float right
    width 20px
    height 30px
    padding 5px 10px
    box-shadow 0 0 0 1px rgba(255, 255, 255, 1)
    border-radius 20px
    font-size 10px
    line-height 15px